<template>
  <div class="param-main">
    <el-form
      ref="tblMain"
      :model="serachForm"
      labelPosition="right"
      inline=""
      label-suffix=":"
      label-width="110px"
    >
      <el-row :span="24">
        <el-col :span="12">
          <el-row :span="24">
            <el-col :span="13">
              <el-form-item label="车架号">
                <el-input
                  v-model="serachForm.vin"
                  size="small"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-upload
                class="upload-demo"
                ref="upload"
                action
                list-type="picture"
                :file-list="fileList"
                :on-change="fileChange"
                :disabled="!isupload"
                accept="png,jpg"
                :before-remove="beforeRemove"
              >
                <el-button size="small" type="primary">传图识别</el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div class="page-pane2">
        <el-button type="primary" size="small" @click="initTableData()"
          >查询</el-button
        >
        <el-button size="small" @click="dataReset()">清空</el-button>
      </div>
    </el-form>
    <div  class="vinDiv">
      <div v-if="carOb.vin" class="carForm">
        <el-row :span="24">
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">图片：</span>
              <img :src="carOb.carImage" style="width: 40px; height: 40px" />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">车架号：</span>
              <span class="carForm_content_name">{{ carOb.vin }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">品牌名称：</span>
              <span class="carForm_content_name">{{ carOb.letter }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">车系名称：</span>
              <span class="carForm_content_name">{{ carOb.brandName }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :span="24">
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">车型名称：</span>
              <span class="carForm_content_name">{{ carOb.carName }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">年份：</span>
              <span class="carForm_content_name">{{ carOb.years }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">发动机：</span>
              <span class="carForm_content_name">{{ carOb.engine }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">排量：</span>
              <span class="carForm_content_name">{{ carOb.displacement }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :span="24">
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">前制动器：</span>
              <span class="carForm_content_name">{{ carOb.frontBrake }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">后制动器：</span>
              <span class="carForm_content_name">{{ carOb.rearBrake }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">车身形式：</span>
              <span class="carForm_content_name">{{ carOb.bodyForm }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">驱动方式：</span>
              <span class="carForm_content_name">{{ carOb.driveMethod }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">驻车制动：</span>
              <span class="carForm_content_name">{{ carOb.parkingBrake }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">功率：</span>
              <span>{{ carOb.power }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">变速器：</span>
              <span class="carForm_content_name">{{ carOb.variator }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="carForm_content">
              <span class="carForm_content_lable">生产商：</span>
              <span class="carForm_content_name">{{ carOb.makeName }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="vinTable">
        <el-table
          ref="tblMain"
          :data="listData"
          height="100%"
          @selection-change="handleSelectionChange"
          v-loading.body="loading"
          border
          stripe
          v-if="listData.length > 0"
        >
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="carName"
            label="车型名称"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="year"
            label="年份"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="engine"
            label="发动机"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="displacement"
            label="排量"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="frontBrake"
            label="前制动器"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="rearBrake"
            label="后制动器"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="bodyForm"
            label="车身形式"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="driveMethod"
            label="驱动方式"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="parkingBrake"
            label="驻车制动"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getCarVinByImg, getCarByVin } from '@/api/carLine'

export default {
  name: 'applyMain',
  props: ['pageData'],
  components: {},
  data() {
    return {
      visible: false,
      fileList: [],
      isupload: true,
      carOb: {
        vin:""
      },
      title: '',
      levelList: [],
      loading: false,
      listData: [],
      selection: [],
      serachForm: {
        vin: ''
      },
      brands: [],
      letterList: []
    }
  },
  created() {},
  mounted() {
    // this.initTableData()
  },
  methods: {
    /**
     *  上传图片识别
     */
    fileChange(file, fileList) {
      this.isupload = false
      this.fileList = fileList;
      this.listData = [];
      this.carOb = {
        vin:""
      }
      this.getBase64(this.fileList[0].raw).then((imgResult) => {
        this.getCarByVin(imgResult)
          .then((vin) => {
            this.serachForm.vin = vin;
            this.initTableData()
            this.fileList = []
            this.isupload = true
          })
          .catch((error) => {
            this.isupload = true
          })
      })
    },
    getCarByVin(imgResult) {
      let datas = {
        imgBase64: imgResult
      }
      return new Promise((resolve) => {
        getCarVinByImg(datas).then((res) => {
          const { code=undefined,data = undefined } = res.data
          if (code == 0) {
            resolve(data.vin)
          }
        })
      })
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    /**
     * 上传文件前
     */
    beforeRemove() {
      this.fileList = []
    },
    goBack(path) {
      this.$router.push(path)
    },
    /**
     * 多选
     */
    handleSelectionChange(val) {
      this.selection = val
    },
    /**
     * 重置
     */
    dataReset() {
      this.serachForm.vin = ''
      this.carOb = {
        vin:""
      }
      this.listData = []
      // this.initTableData()
    },
    /**
     * 获取表格数据
     */
    initTableData() {
      let me = this
      me.selection = []
      let param = Object.assign({
        ...me.serachForm
      })
      me.loading = true
      getCarByVin(param)
        .then((res) => {
          me.loading = false
          const { code = undefined, data = {} } = res.data
          if (!code) {
            console.log(data);
            me.carOb = data.vincar ? data.vincar:{vin:""}
            me.listData = data
          } else {
            me.$message.error(data)
          }
        })
        .catch(() => {
          me.$message.error('服务器繁忙')
          me.loading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.vinDiv{
  height: calc(100% - 110px);
  .carForm {
    padding: 10px;
    &_content {
      display: flex;
      height: 40px;
      line-height: 40px;
      &_lable {
        width: 80px;
        text-align: right;
      }
    }
  }
  .vinTable{
    height: calc(100% - 175px);
  }
}

</style>
